<template>
  <div class="z-user">
    <el-tooltip 
      class="item" 
      effect="dark" 
      content="发布文档" 
      placement="bottom">
      <div
        class="z-create"
        @click="runTo('/create')">
        <span class="el-icon-document"/>
      </div>
    </el-tooltip>
    <el-tooltip 
      class="item" 
      effect="dark" 
      content="我的消息" 
      placement="bottom">
      <div
        class="z-msg"
        @click="runTo('/news')">
        <span class="el-icon-bell"/>
      </div>
    </el-tooltip>
    <nuxt-link 
      to="/login"
      class="loginBtn">
      <img 
        src="@/assets/imgs/icon-user_login.svg"
        height="16">
      &nbsp;登录
    </nuxt-link>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        user:''
      }
    },
    methods: {
      open(url) {
        this.$confirm('您还没有登录，请您先登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.location.href = 'login'
        })
      },
      runTo(url){
        if(!this.user)
          this.open()
        else 
          window.location.href = window.location.href+url
      }
    }
  }
</script>

<style>
  .z-user{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height:50px;
  }
  .z-user>*{
    margin-left: 15px;
    display: block;
    height:24px;
    background-color: #f4f8fb;
    border:1px solid #eceef1;
    border-radius: 2px;
    line-height: 32px;
    display: flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 14px;
    color:#4c4c4c;
  }
  .z-user>*:hover{
    color:#409EFF;
  }
</style>